<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./static/js/jquery.min.js"></script>
    <script src="./static/js/bootstrap.min.js"></script>
    <script src="./static/js/x6.js"></script>
    <script src="./static/js/x6-node.js"></script>
	
    <link href="./static/css/bootstrap.min.css" rel="stylesheet" />

    <style type="text/css">
        #container {
            width: 100%;
            height: 600px;
        display: flex;
        border: 1px solid #dfe3e8;
        }
        #stencil {
        width: 180px;
        height: 100%;
        position: relative;
        border-right: 1px solid #dfe3e8;
        }
        #graph-container {
        width: calc(100% - 180px);
        height: 100%;
        }
        .x6-widget-stencil  {
        background-color: #fff;
        }
        .x6-widget-stencil-title {
        background-color: #fff;
        }
        .x6-widget-stencil-group-title {
        background-color: #fff !important;
        }
        .x6-widget-transform {
        margin: -1px 0 0 -1px;
        padding: 0px;
        border: 1px solid #239edd;
        }
        .x6-widget-transform > div {
        border: 1px solid #239edd;
        }
        .x6-widget-transform > div:hover {
        background-color: #3dafe4;
        }
        .x6-widget-transform-active-handle {
        background-color: #3dafe4;
        }
        .x6-widget-transform-resize {
        border-radius: 0;
        }
        .x6-widget-selection-inner {
        border: 1px solid #239edd;
        }
        .x6-widget-selection-box {
        opacity: 0;
        }
    </style>
</head>
<body>
    <div id="container">
        
    </div>
    
    <script>
        X6.Graph.registerNode(
            'event',
            {
              inherit: 'circle',
              attrs: {
                body: {
                  strokeWidth: 2,
                  stroke: '#5F95FF',
                  fill: '#FFF',
                },
              },
            },
            true,
          )
          
          X6.Graph.registerNode(
            'activity',
            {
              inherit: 'rect',
              markup: [
                {
                  tagName: 'rect',
                  selector: 'body',
                },
                {
                  tagName: 'image',
                  selector: 'img',
                },
                {
                  tagName: 'text',
                  selector: 'label',
                },
              ],
              attrs: {
                body: {
                  rx: 6,
                  ry: 6,
                  stroke: '#5F95FF',
                  fill: '#EFF4FF',
                  strokeWidth: 1,
                },
                img: {
                  x: 6,
                  y: 6,
                  width: 16,
                  height: 16,
                  'xlink:href':
                    'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*pwLpRr7QPGwAAAAAAAAAAAAAARQnAQ',
                },
                label: {
                  fontSize: 12,
                  fill: '#262626',
                },
              },
            },
            true,
          )
          
          X6.Graph.registerNode(
            'gateway',
            {
              inherit: 'polygon',
              attrs: {
                body: {
                  refPoints: '0,10 10,0 20,10 10,20',
                  strokeWidth: 2,
                  stroke: '#5F95FF',
                  fill: '#EFF4FF',
                },
                label: {
                  text: '+',
                  fontSize: 40,
                  fill: '#5F95FF',
                },
              },
            },
            true,
          )
          
          X6.Graph.registerEdge(
            'bpmn-edge',
            {
              inherit: 'edge',
              attrs: {
                line: {
                  stroke: '#A2B1C3',
                  strokeWidth: 2,
                },
              },
            },
            true,
          )
          
          const graph = new X6.Graph({
            container: document.getElementById('container'),
            connecting: {
              router: 'orth',
            },
          })

          const data=[
          {
            "id": "1",
            "shape": "event",
            "width": 40,
            "height": 40,
            "position": {
              "x": 50,
              "y": 180
            }
          },
          {
            "id": "2",
            "shape": "activity",
            "width": 100,
            "height": 60,
            "position": {
              "x": 20,
              "y": 280
            },
            "label": "请假申请"
          },
          {
            "id": "3",
            "shape": "bpmn-edge",
            "source": "1",
            "target": "2"
          },
          {
            "id": "4",
            "shape": "gateway",
            "width": 55,
            "height": 55,
            "position": {
              "x": 170,
              "y": 282.5
            }
          },
          {
            "id": "5",
            "shape": "bpmn-edge",
            "source": "2",
            "target": "4"
          },
          {
            "id": "6",
            "shape": "activity",
            "width": 100,
            "height": 60,
            "position": {
              "x": 300,
              "y": 240
            },
            "label": "领导审批"
          },
          {
            "id": "7",
            "shape": "activity",
            "width": 100,
            "height": 60,
            "position": {
              "x": 300,
              "y": 320
            },
            "label": "人事审批"
          },
          {
            "id": "8",
            "shape": "bpmn-edge",
            "source": "4",
            "target": "6"
          },
          {
            "id": "9",
            "shape": "bpmn-edge",
            "source": "4",
            "target": "7"
          },
          {
            "id": "10",
            "shape": "gateway",
            "width": 55,
            "height": 55,
            "position": {
              "x": 460,
              "y": 282.5
            }
          },
          {
            "id": "11",
            "shape": "bpmn-edge",
            "source": "6",
            "target": "10"
          },
          {
            "id": "12",
            "shape": "bpmn-edge",
            "source": "7",
            "target": "10"
          },
          {
            "id": "13",
            "shape": "activity",
            "width": 100,
            "height": 60,
            "position": {
              "x": 560,
              "y": 280
            },
            "label": "人事审批"
          },
          {
            "id": "14",
            "shape": "bpmn-edge",
            "source": "10",
            "target": "13"
          },
          {
            "id": "15",
            "shape": "event",
            "width": 40,
            "height": 40,
            "position": {
              "x": 710,
              "y": 290
            },
            "attrs": {
              "body": {
                "strokeWidth": 4
              }
            }
          },
          {
            "id": "16",
            "shape": "bpmn-edge",
            "source": "13",
            "target": "15"
          }
        ]
        
        const cells=[];
        data.forEach((item) => {
        if (item.shape === 'bpmn-edge') {
            cells.push(graph.createEdge(item))
        } else {
            cells.push(graph.createNode(item))
        }
        })
        graph.resetCells(cells)
        graph.zoomToFit({ padding: 10, maxScale: 1 })
          
      </script>
</body>
</html>